<template>
  <!-- 创建时间：2023/4/26 -->
  <!-- 作者：admin -->
  <!-- MvDetailsPage组件说明： mv详情页面-->
    <div class="mv-detail" v-loading.fullscreen.lock="isLoading">
        <!-- mv视频部分-->
        <div class="mv-show">
            <MvPlay :mv-details="mvDetails"/>
        </div>
        <!-- mv信息部分-->
        <div class="mv-info">
            <div class="mv-info-title">
                {{ mvDetails.artistName }} - {{ mvDetails.name }}
            </div>
            <div class="mv-info-views">
                {{ formatBigNum(mvDetails.playCount) }} Views · {{ mvDetails.publishTime }}
            </div>
        </div>
        <!-- 更多mv部分-->
        <div class="mv-more">
            <SongPart :music-list="simiMvList"/>
        </div>
    </div>
</template>

<script>
import MvPlay from "@/components/MvPlay.vue";
import {getMvsInfo, getSimiMvs} from "@/http";
import {formatArray, formatBigNum} from "@/http/tools";
import SongPart from "@/components/SongPart.vue";
import {ALUBMLISTNOAUTHOR, MVLOADINGFINISH, SINGERSMVsNOTIME} from "@/http/constant";

export default {
    name: "MvDetailsPage",
    components: {SongPart, MvPlay},
    props: ['id'],
    data() {
        return {
            mvDetails: {},
            simiMvs: [],
            isLoading: true
        }
    },
    methods: {
        formatBigNum,
        // 获取mv的详细信息
        getMvsDetail(mvId) {
            this.isLoading = true
            getMvsInfo(mvId).then(res => {
                const {code, data} = res
                if (code === 200) {
                    const {id, name, artistId, artistName, cover, publishTime, playCount, brs, artists, duration} = data
                    this.mvDetails = {
                        id,
                        name,
                        artistId,
                        artistName,
                        cover,
                        publishTime,
                        brs,
                        artists,
                        duration,
                        playCount
                    }
                }
            })
            // 获取相似的mv
            getSimiMvs(mvId).then(res => {
                const {mvs} = res
                const formatMv = mvs.map(item => {
                    const {id, name, briefDesc, artistId, artistName, cover} = item
                    return {
                        id,
                        name,
                        briefDesc,
                        artistId,
                        artistName,
                        cover
                    }
                })
                this.simiMvs = formatArray(1, 5, formatMv)
            })
        }
    },
    created() {
        this.getMvsDetail(this.id)
    },
    beforeRouteUpdate(to, from, next) {
        const {params: {id}} = to
        this.getMvsDetail(id)
        next()
    },
    mounted() {
        // 视频加载完成隐藏正在加载的动画
        this.$bus.$on(MVLOADINGFINISH, d => {
            const {id, isLoading} = d
            if (String(id) === String(this.mvDetails.id)) {
                this.isLoading = isLoading
            }
        })
    },
    computed: {
        simiMvList() {
            return {
                title: "更多视频",
                type: SINGERSMVsNOTIME,
                specialRoutes: "#",
                musicList: this.simiMvs,
                isShowAll: false,
                isChange: false
            }
        }
    }
}
</script>

<style scoped lang="less">
.mv-detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  .mv-show {
    height: auto;
    width: 100%;
  }

  .mv-info {
    width: 100%;
    margin-top: .5vw;
    cursor: default;

    .mv-info-title {
      font-size: 1.2vw;
      font-weight: 700;
    }

    .mv-info-views {
      margin-top: .5vw;
      font-size: .8vw;
      font-weight: 300;
    }
  }

  .mv-more {
    margin-top: 2vh;
  }
}
</style>